{extend name="index_layout"/}
{block name="main"}
<link href="/static/libs/formSelects-v4.css" rel="stylesheet" />
<script src="/static/libs/formSelects-v4.js"></script>
<style>
    .layui-form-item{
        float: left;
        width: 50%;
        clear: none;
    }
</style>
<form class="layui-form" method="post">
    <h1>基础信息</h1>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>工单编号 </label>
        <div class="layui-input-block">
            <select name="gongdan_id" id="gongdan_id" lay-filter="findGD">
                <option value="0">请选择</option>
                {volist name="gongdan" id="item"}
                <option value="{$item.id}">{$item.nums}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品编号 </label>
        <div class="layui-input-block">
            <input type="text" name="product_nums" disabled autocomplete="off" placeholder="产品编号" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工序名称 </label>
        <div class="layui-input-block">
            <select name="procedure_id" id="procedure_id" lay-filter="procedure_id">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品名称 </label>
        <div class="layui-input-block">
            <input type="text" name="product_title" disabled lay-verify="required" autocomplete="off" placeholder="请输入部门编码" class="layui-input layui-disabled">
            <input type="hidden" name="product_id" value="" id="product_id">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>工序状态 </label>
        <div class="layui-input-block">
            <input type="radio" id="status0" title="未开始" name="status">
            <input type="radio" id="status1" title="执行中" name="status">
            <input type="radio" id="status2" title="已结束" name="status">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品规格 </label>
        <div class="layui-input-block">
            <input type="text" name="product_guige" disabled lay-verify="required" autocomplete="off" placeholder="请输入产品规格" class="layui-input layui-disabled">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">生产人员 </label>
        <div class="layui-input-block">
            <select name="user_id" id="user_id">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">报工数 </label>
        <div class="layui-input-block">
            <table class="layui-table" id="attribute">
                <thead>
                    <th>属性</th>
                    <th>数量</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="attr[]"></td>
                        <td><input type="text" name="nums[]"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间 </label>
        <div class="layui-input-block">
            <input type="text" name="begin_time" id="begin_time" lay-verify="required" autocomplete="off" placeholder="开始时间" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束时间 </label>
        <div class="layui-input-block">
            <input type="text" name="end_time" id="end_time" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">报工时长 </label>
        <div class="layui-input-block">
            <input type="number" name="hours" autocomplete="off" placeholder="时" class="layui-input" style="width:30%;float:left;">
            <input type="number" style="width:30%;float:left;" name="minutes" autocomplete="off" placeholder="分" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">良品数 </label>
        <div class="layui-input-block">
            <table class="layui-table" id="good">
                <thead>
                    <th>属性</th>
                    <th>数量</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="attr[]"></td>
                        <td><input type="text" name="nums[]"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标准效率 </label>
        <div class="layui-input-block">
            <input type="text" name="xiaolv" disabled lay-verify="required" autocomplete="off" placeholder="" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">实际效率 </label>
        <div class="layui-input-block">
            <input type="text" value="" name="shijixl" lay-verify="required" autocomplete="off" placeholder="" class="layui-input layui-disabled" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">达标 </label>
        <div class="layui-input-block">
            <input type="text" name="dabiao" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">不良品数 </label>
        <div class="layui-input-block">
            <table class="layui-table" id="bad">
                <thead>
                    <th>属性</th>
                    <th>数量</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="attr[]"></td>
                        <td><input type="text" name="nums[]"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">不良品项 </label>
        <div class="layui-input-block">
            <table class="layui-table" id="badList">
                <thead>
                    <th>属性</th>
                    <th>不良品项</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="attr[]"></td>
                        <td><input type="text" name="nums[]"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">工序进度 </label>
        <div class="layui-input-block">
            <input type="number" name="" autocomplete="off" placeholder="时" class="layui-input">
        </div>
    </div>
    <div style="clear: both;"></div>
    <h1>绩效信息</h1>
    <hr>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">计价方式 </label>
        <div class="layui-input-block">
            <input type="radio" name="type" disabled autocomplete="off" title="计件" class="layui-input type_1">
            <input type="radio" name="type" disabled autocomplete="off" title="计时" class="layui-input type_2">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">工资单价 </label>
        <div class="layui-input-block">
            <input type="text" name="prices" disabled autocomplete="off" title="" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">预计工资 </label>
        <div class="layui-input-block">
            <input type="text" name="salary" disabled autocomplete="off" title="" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">审批状态 </label>
        <div class="layui-input-block">
            <input type="radio" name="status2" lay-filter="status" value="0" checked autocomplete="off" title="未审核" class="layui-input">
            <input type="radio" name="status2" lay-filter="status" value="1" autocomplete="off" title="已审核" class="layui-input">
            <input type="hidden" name="status" value="0">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">审批人 </label>
        <div class="layui-input-block">
            <input type="text" name="type" value="{$admin}" disabled autocomplete="off" title="" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item" style="clear: both;">
        <label class="layui-form-label">报工实际 </label>
        <div class="layui-input-block">
            <input type="text" name="type" value="{:date('Y-m-d H:i:s')}" autocomplete="off" title="" class="layui-input layui-disabled">
        </div>
    </div>

    
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter='ds' type="button" data-refresh="false">立即提交</button>
            <button class="layui-btn layui-btn-normal" type="button" onclick="var index1 = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index1);">返回</button>
        </div>
    </div>
</form>

{/block}

{block name="script"}
<script>
    $(function(){
        layui.formSelects.render('userDetailOrganizationSelectId', {
            skin: "normal", //多选皮肤normal|primary|default|danger|warm
            height: "auto",                //是否固定高度, 38px | auto
            radio: false,                  //是否设置为单选模式
            direction: "down",        //显示方式向下显示
            on: function(id, vals, val, isAdd, isDisabled){
            },            //同formSelects.on
        })
    })
    layui.use(['form','laydate','yznForm'], function() {
        var form = layui.form;
        var laydate = layui.laydate;
        var yznForm = layui.yznForm;
        var biaozhunCount = 0;
        var task,product,productList,userlist,wages;
        laydate.render({
            elem: '#begin_time', //指定元素
            type:"datetime",
            change:function(value,date,endDate){
            }
        });
        laydate.render({
            elem: '#end_time', //指定元素
            type:"datetime",
            change:function(value,date,endDate){
            }
        });
        form.on('radio(status)',function(data){
            // console.log(data.value);
            $('input[name="status"]').val(data.value);
        })
        form.on('select(findGD)',function(data){
            $.post('{:url("findGD")}',{id:data.value},function(res){
                product = res.product;
                procedureList = res.procedureList;
                userlist = res.userList;
                task = res.task;
                wages = res.wages;
                renderInit(1);
            },'json')
        })

        function renderInit(types)
        {
            $('input[name="product_nums"]').val(product.nums)
            $('input[name="product_title"]').val(product.title)
            $('input[name="product_guige"]').val(product.guige)
            $('input[name="product_id"]').val(product.id)
            if(types == 1){
                var _html = '';
                for(var i in procedureList){
                    _html += '<option value="'+procedureList[i].id+'">'+procedureList[i].title+'</option>'
                }
                $('#procedure_id').html(_html);

            }
            var _html2 = '';
            for(var i in userlist){
                _html2 += '<option value="'+userlist[i].id+'">'+userlist[i].nickname+'</option>'
            }
            $('#user_id').html(_html2);
            $('#status'+procedureList[0]['status']).attr('checked','true');
            $('#begin_time').val(task.actual_begin_time)
            $('#end_time').val(task.actual_end_time)
            var plan = JSON.parse(task.plan);
            var attrHtml = '';
            for(var i in plan){
                attrHtml += '<tr>'+
                    '<td><input type="text" name="attr[]" disabled value="'+plan[i].key+'"></td>'+
                    '<td><input type="text" name="nums[]" value="'+plan[i].nums+'"></td>'+
                '</tr>';
            }
            $('#attribute').find('tbody').html(attrHtml);
            var good = '';
            for(var i in plan){
                good += '<tr>'+
                    '<td><input type="text" name="attr[]" disabled value="'+plan[i].key+'"><input type="hidden" name="attr[]" value="'+plan[i].key+'"></td>'+
                    '<td><input type="text" class="goodnums" name="goodnums[]" value=""></td>'+
                '</tr>';
            }
            $('#good').find('tbody').html(good);
            var bad = '';
            for(var i in plan){
                bad += '<tr>'+
                    '<td><input type="text" name="attr[]" disabled value="'+plan[i].key+'"></td>'+
                    '<td><input type="text" name="badnums[]" value=""></td>'+
                '</tr>';
            }
            $('#bad').find('tbody').html(bad);
            var badList = '';
            for(var i in plan){
                badList += '<tr>'+
                    '<td><input type="text" name="attr[]" disabled value="'+plan[i].key+'"></td>'+
                    '<td><input type="text" name="bad[]" class="badList" value=""><input type="hidden" value="" name="jsonstring[]"></td>'+
                '</tr>';
            }
            $('#badList').find('tbody').html(badList);
            if(wages.length<=0){
                $('input[name="xiaolv"]').val('未设置')
                $('input[name="prices"]').val(0)
            }else{
                $('input[name="xiaolv"]').val(wages.counts+'/'+Math.floor(wages.minutes/60)+'时'+(wages.minutes-(Math.floor(wages.minutes/60)*60))+'分');
                biaozhunCount = wages.counts;
                $('input[name="prices"]').val(wages.prices)
                $('.type_'+wages.type).attr('checked',true);

            }
            form.render();

        }
        
        form.on('select(procedure_id)',function(data){
            $.post('{:url("findGX")}',{id:data.value,product_id:$('#product_id').val()},function(res){
                userlist = res.userList;
                task = res.task;
                wages = res.wages;
                renderInit(0);
            },'json');
        })
        $('body').on('click','.badList',function(){
            var procedure_id = $('#procedure_id').val();
            var _this = $(this);
            layer.open({
                type:2,
                content:'{:url("badL")}?procedure_id='+procedure_id,
                area: ['800px','500px'],
                btn:['确定','取消'],
                success: function(dom) {
                    var domhtml = $(dom[0]).find("iframe").eq(0).contents();
                    // jsondata = jsondata?JSON.stringify(jsondata):'';
                    // var jsondata = $('#jsondata').html();
                    var jsondata = _this.siblings('input[name="jsonstring[]"]').val();
                    // console.log(jsondata);
                    domhtml.find("#jsondata2").html(jsondata);
                },
                yes: function (index,dom) {
                    var domhtml = $(dom[0]).find("iframe").eq(0).contents();
                    var jsondata = domhtml.find('#jsondata2').html();
                    jsondata2 = JSON.parse(jsondata);
                    // jsondata2.push(_this.parent().prev().children('input[name="attr[]"]').val());
                    // console.log(JSON.stringify(jsondata2));
                    _this.siblings('input[name="jsonstring[]"]').val(JSON.stringify(jsondata2));

                    var _html = '';
                    for(var i in jsondata2){
                        if(jsondata2[i].nums){
                            _html += jsondata2[i].title+':'+jsondata2[i].nums+';';
                        }
                    }
                    _this.val(_html);
                    layer.close(index);
                }
            })
        })
        function setDisabled(){
            if($('#gongdan_id').val()){

            }
        }
        $('body').on('input','input[name="goodnums[]"]',function(){
            calcEfficiency();
            calcsalary();
        })
        $('input[name="hours"]').on('input',function(){
            calcEfficiency();
        })
        $('input[name="minutes"]').on('input',function(){
            calcEfficiency();
        })
        //计算实际效率
        function calcEfficiency(){
            var total = 0;
            //总数
            $('input[name="goodnums[]"]').each(function(){
                if($(this).val()){
                    total += parseInt($(this).val());
                }
            })
            //时长
            var hours = $('input[name="hours"]').val();
            var minute = $('input[name="minutes"]').val();
            // 总时长
            var totaltime = parseInt(hours) + Math.round(minute/60);
            $('input[name="shijixl"]').val((total/totaltime)+'/1小时');
            console.log(biaozhunCount);
            if(biaozhunCount >0){
                if((total/totaltime)>=biaozhunCount){
                    $('input[name="dabiao"]').val('已达标');
                }else{
                    $('input[name="dabiao"]').val('未达标');
                }
            }else{
                $('input[name="dabiao"]').val('待定');
            }
        }
        //计算实际工资
        function calcsalary(){
            var total = 0;
            $('input[name="goodnums[]"]').each(function(){
                if($(this).val()){
                    total += parseInt($(this).val());
                }
            })
            var prices = wages.prices
            salary = prices*total;
            $('input[name="salary"]').val(salary);
        }
        yznForm.listen();
    })
</script>
{/block}